<template>
<!-- <div>home</div> -->
<div class='home'>
    <homeheader class="home-header" :city='city'></homeheader>
     <homeswiper class='home-swiper' :swiperList='swiperList'></homeswiper>
      <homecatalog class='home-catalog' :iconList='iconList'></homecatalog>
    <homehot class='home-hot' :hotPriseList='hotPriseList' :hotTrendList='hotTrendList' :hotContentList='hotContentList'></homehot>
        <homeweekend class='home-weekend' :weekendList='weekendList'></homeweekend>
</div>

</template>

<script>
import axios from 'axios'
import homeheader from './components/homeheader'
import homeswiper from './components/homeswiper'
import homecatalog from './components/homecatalog'
import homehot from './components/homehot'
import homeweekend from './components/homeweekend'
export default {
  name: 'home',
  components:{
      homeheader,
      homeswiper,
      homecatalog,
      homehot,
      homeweekend,
  },
  data(){
     return{
         city:'',
         hotPriseList:[],
         hotTrendList:[],
         hotContentList:[],
         iconList:[],
         swiperList:[],
         weekendList:[],
      

     }
  },
  methods:{
    getHomeData(){
        axios.get('/api/index.json')
        .then(this.getHomeDataSucc)
    },
    getHomeDataSucc(res){
    //    console.log(res)
      res = res.data
      if(res.data){
        const data = res.data
        this.city = data.city
        this.hotPriseList = data.hotPriseList
        this.hotTrendList = data.hotTrendList
        this.hotContentList = data.hotContentList
        this.iconList = data.iconList
        this.swiperList = data.swiperList
        this.weekendList = data.weekendList
      }
    }
  },
  mounted(){
      this.getHomeData()
      {
        
      }
 
      
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='stylus' scoped>
.home 
 position relative
 .home-header
   position:absolute
   top:0
   left:0
   z-index :100
   width :100%
</style>
